<template>
    <div id="Aside" :class="{ isCollapse: store.state.isCollapse }">
        <a href="/" class="logo hidden-xs-only">
            <div class="img-wrap">
                <img src="@/assets/logo.png" />
            </div>
            <h3 class="title">Vue-Manage</h3>
        </a>
        <el-menu
            class="menu-tree no-select"
            :collapse="store.state.isCollapse"
            :unique-opened="true"
            :default-active="defaultActive"
            background-color="var(--bgColor1)"
            text-color="var(--color1)"
            router
            @select="handleSelect"
        >
            <template v-for="item in menuList" :key="item.path">
                <el-menu-item v-if="!item.children" :index="item.path" :key="item.path">
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <template #title>{{ item.label }}</template>
                </el-menu-item>
                <el-sub-menu v-else index="">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{ item.label }}</span>
                    </template>
                    <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">
                        <el-icon>
                            <component :is="child.icon" />
                        </el-icon>
                        <template #title>{{ child.label }}</template>
                    </el-menu-item>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
const store = useStore()
const route = useRoute()
const router = useRouter()
// 获取默认选中项
const defaultActive = computed(() => route.path)

const menuList = ref(0)
const getMenuList = async () => {
    const res = await $api.getMenuList()
    menuList.value = res
}
getMenuList()

// 获取所有route
const allRoutes = []
function handleRoutes (routes) {
    routes.forEach(item => {
        allRoutes.push({
            name: item.meta.title,
            path: item.path.slice(0, 1) !== '/' ? '/' + item.path : item.path
        })
        if (item.children) handleRoutes(item.children)
    })
}
handleRoutes(router.options.routes)

// 处理当前选中的菜单
function handleSelect (key) {
    const nameIndex = allRoutes.findIndex(item => item.path === key)
    if (nameIndex === -1) return
    const name = allRoutes[nameIndex].name
    store.commit('addTag', { name, path: key })
}
</script>

<style lang='less' >
#Aside {
    width: 200px;
    height: 100%;
    background-color: var(--bgColor1);
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.3s ease;
    border-right: 1px solid var(--bgColor2);
    .logo {
        display: flex;
        align-items: center;
        height: 60px;
        padding: 20px;
        padding-left: 10px;
        width: 100%;
        .img-wrap {
            width: 40px;
            height: 30px;
            text-align: center;
            img {
                height: 30px;
            }
        }

        .title {
            color: var(--color1);
            font-weight: 400;
            text-indent: 5px;
            letter-spacing: 2px;
            overflow: hidden;
            white-space: nowrap;
        }
    }
    .menu-tree {
        border: 0;
    }
}
.isCollapse {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 60px !important;

    .logo {
        padding: 0 !important;
        display: flex;
        justify-content: center;
        .img-wrap {
            flex: 1;
        }
        .title {
            width: 0;
        }
    }
}
@media screen and(max-width: 768px) {
    #Aside {
        width: 145px;
    }
    .isCollapse {
        width: 0 !important;
    }
}

.el-menu-item,
.el-sub-menu {
    transition: background-color 0.5s ease !important;

    &:hover {
        background-color: var(--bgColor3);
        color: var(--color2);
    }
}
</style>
